// include
// 设置高度与行高一致
@mixin lineH($index){
    height: $index;
    line-height: $index;
}

// 文本样式
@mixin txts($fs,$cl){
    @if $fs {
        font-size: $fs;
    }
    @if $cl {
        color: $cl;
    }
}
// 透明度设置
@mixin op($index){
    opacity: $index;
    filter: alpha(opacity = ($index * 100));
}
// 变形
@mixin transForm($index){
    -webkit-transform: $index;
    -moz-transform: $index;
    -ms-transform: $index;
    transform: $index;
}
// 制作小箭头
@mixin arrow($clr,$index){
    border-right: 1px solid $clr;
    border-bottom: 1px solid $clr;
    @include transForm(rotate($index))
}
// 圆角度
@mixin radiu($index){
    -webkit-border-radius: $index;
    -moz-border-radius: $index;
    border-radius: $index;
}
// border-size
@mixin bs($index){
    -webkit-box-sizing: $index;
    -moz-box-sizing: $index;
    box-sizing: $index;
}
// 盒阴影
@mixin boxSd($shadow...){
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    box-shadow: $shadow;
}
// 省略文本
@mixin text-overflow($width:100%,$display:block) {
    width: $width;
    display: $display;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
/* clearfix */
@mixin clearfix {
    &:after {
        clear: both;
        content: '.';
        display: block;
        height: 0;
        line-height: 0;
        overflow: hidden;
    }
    *height: 1%;
}
  // 处理字体
@mixin font-dpr($font-size){
    font-size: $font-size;
    // [data-dpr="2"] & {
    //     font-size: $font-size * 2;
    // }
    // [data-dpr="3"] & {
    //     font-size: $font-size * 3;
    // }
    @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
        font-size: $font-size;
    }
    @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
        font-size: $font-size * 3;
    // }
    }
}

// 背景图片
@mixin bg-image($url){
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        background-image: url($url + "@3x.png");
    }
}

// 处理一像素
@mixin border-top($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
    //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: $color;
        content: ' ';
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            -webkit-transform: scaleY(0.3);
            transform: scaleY(0.3)
        }
    }
}
@mixin border-bottom($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
    //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: $color;
        content: ' ';
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            -webkit-transform: scaleY(0.3);
            transform: scaleY(0.3)
        }
    }
}
@mixin border-left($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
    //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 1px;
        background-color: $color;
        content: ' ';
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5)
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3)
        }
    }
}
@mixin border-right($color) {
    // 用于伪类的定位
    position: relative;
    &:after {
    //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 1px;
        background-color: $color;
        content: ' ';
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5)
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            -webkit-transform: scaleX(0.3);
            transform: scaleX(0.3)
        }
    }
}
// 四条边
@mixin border ($color, $radius:0) {
    position: relative;
    &:after {
    //定义一个伪类,将它置于元素的底部.
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid $color;
        border-radius: $radius;
        @include radiu ($radius);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        @include bs(border-box);
        content: '';
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
            width: 200%;
            height: 200%;
            border-radius: $radius*2;
            -webkit-transform: scale(0.5,0.5);
            transform: scale(0.5,0.5)
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
            width: 300%;
            height:  300%;
            border-radius: $radius*3;
            -webkit-transform: scale(0.3,0.3);
            transform: scale(0.3,0.3)
        }
    }
}
